<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="/static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
    <script src="/static/js/china.js" th:src="@{js/map/chongqing.js}"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>重庆疫情分布图</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" th:href="@{/css/dashboard.css}" rel="stylesheet">
</head>

<body>

<!--引入topbar-->
<div th:replace="~{commons/bar::topbar}"></div>
<div class="container-fluid">
    <div class="row">
        <!--引入sidebar-->
        <div th:replace="~{commons/bar::#sidebar(activeUri='dashboard')}"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div style="width: 1218px; height: 400px; padding: 0">
                <div id="container1" style="width: 100%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container1'));
                    var base = +new Date(2020, 0, 21);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];
                    for (var i = 1; i < 84; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }
                    option = {
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView : {
                                    show : true,
                                    readOnly : true,
                                    optionToContent : function(opt) {
                                        //console.info(opt);
                                        var axisData = opt.xAxis[0].data;
                                        var series = opt.series;
                                        var tdHeaders = '<td>时间</td>'; //表头
                                        series.forEach(function(item) {
                                            tdHeaders += '<td>' + item.name + '</td>'; //组装表头
                                        });
                                        var table = '<div class="table-responsive"><table class="table table-bordered table-striped table-hover" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
                                        var tdBodys = ''; //数据
                                        for (let i = 0, l = axisData.length; i < l; i++) {
                                            for (let j = 0; j < series.length; j++) {
                                                tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
                                            }
                                            table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                            tdBodys = '';
                                        }

                                        table += '</tbody></table></div>';
                                        return table;
                                    }
                                },
                                restore:{},
                                saveAsImage: {}
                            }
                        },
                        title: {
                            text: '现存确诊'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['现存确诊']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '现存确诊',
                                type: 'line',
                                stack: '总量',
                                data: [9, 27, 57, 75, 110, 132, 147, 164, 205, 236, 258, 291, 326, 350,
                                    372, 385, 393, 405, 415, 418, 423, 413, 397, 380, 355, 339, 323, 296, 281, 262, 250, 239, 234, 221, 198, 186, 169, 148, 132, 120, 101, 80, 68, 58, 50, 44, 43, 28, 23, 16, 6, 4, 1, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 2, 2, 3, 3, 3,3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3]
                            }
                        ]
                    };

                    myChart.setOption(option)
                </script>
                <div style="width: 1218px; height: 100px; padding: 0; text-align: center">
                    <table class="table table-hover table-bordered  table-sm" style="text-align:center; width:
                700px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                现存确诊分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>现存确诊</td>
                            <td>自1/22至2/11呈上升趋势，之后确诊人数逐步下降，3/12后逐渐平稳</td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>

            <div style="width: 1218px; height: 500px; padding: 0">
                <div id="container2" style="width: 100%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container2'));
                    var base = +new Date(2020, 0, 21);
                    var date = []
                    var oneDay = 24 * 3600 * 1000;
                    var data1 =[4, 18, 30, 18, 35, 22, 15, 18, 41, 32, 24, 38, 37, 29, 23, 22, 15, 20, 22,
                        18, 19, 13, 11, 8, 7, 7, 2, 2, 5, 7, 5, 1, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0,0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ;
                    var data2 =[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0,
                        0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                    var data3 =[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 2, 4, 2, 5, 1, 9, 7, 8, 12, 15, 13, 23, 26,
                        24, 32, 23, 18, 29, 20, 25, 17, 12, 7, 14, 23, 12, 17, 21, 16, 12, 19, 21, 12, 10, 8, 6, 1, 15, 5, 7, 10, 2, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ;
                    for (var i = 1; i < 84; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }
                    option = {
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView : {
                                    show : true,
                                    readOnly : true,
                                    optionToContent : function(opt) {
                                        //console.info(opt);
                                        var axisData = opt.xAxis[0].data;
                                        var series = opt.series;
                                        var tdHeaders = '<td>时间</td>'; //表头
                                        series.forEach(function(item) {
                                            tdHeaders += '<td>' + item.name + '</td>'; //组装表头
                                        });
                                        var table = '<div class="table-responsive"><table class="table table-bordered table-striped table-hover" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
                                        var tdBodys = ''; //数据
                                        for (let i = 0, l = axisData.length; i < l; i++) {
                                            for (let j = 0; j < series.length; j++) {
                                                tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
                                            }
                                            table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                            tdBodys = '';
                                        }

                                        table += '</tbody></table></div>';
                                        return table;
                                    }
                                },
                                restore:{},
                                saveAsImage: {}
                            }
                        },
                        title: {
                            text: '新增(确诊、治愈、死亡)',
                            top: '7%'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['新增确诊', '新增治愈', '新增死亡'],
                            top: '7%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '新增确诊',
                                type: 'line',
                                stack: '新增确诊',
                                data: data1
                            },
                            {
                                name: '新增治愈',
                                type: 'line',
                                stack: '新增治愈',
                                data: data3
                            },
                            {
                                name: '新增死亡',
                                type: 'line',
                                stack: '新增死亡',
                                data: data2
                            }

                        ]
                    };

                    myChart.setOption(option)
                </script>
                <div style="width: 1218px; height: 200px; padding: 0">
                    <table class="table table-hover table-bordered  table-sm" style="text-align:center; width:
                700px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                新增(确诊、治愈、死亡)分析
                            </th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>新增确诊</td>
                            <td>1/22至2/2新增确诊人数虽有升有降，但呈上涨趋势，之后呈下降趋势，2/25后趋于平稳</td>
                        </tr>
                        <tr>
                            <td>新增治愈</td>
                            <td>截至2/15，新增治愈人数呈增长趋势，而后逐渐下降，直至平稳</td>
                        </tr>
                        <tr>
                            <td>新增死亡</td>
                            <td>基本平稳</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div style="width: 1218px; height: 500px; padding: 0">
                <div id="container3" style="width: 100%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container3'));
                    var base = +new Date(2020, 0, 21);
                    var date = []
                    var oneDay = 24 * 3600 * 1000;
                    var date1 = [9, 27, 57, 75, 110, 132, 147, 165, 206, 238, 262, 300, 337, 366, 389, 411,
                        426, 446, 468, 486, 505, 518, 529, 537, 544, 551, 553, 555, 560, 567, 572, 573, 575, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 576, 577, 578, 578, 578, 578, 578, 579, 579, 579,579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579];
                    var date2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 4, 5, 5,
                        5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6,6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6];
                    var date3 = [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 3, 7, 9, 14, 15, 24, 31, 39, 51, 66, 79,
                        102, 128, 152, 184, 207, 225, 254, 274, 299, 316, 328, 335, 349, 372, 384, 401, 422, 438, 450, 469, 490, 502, 512, 520, 526, 527, 542, 547, 554, 564, 566, 569, 570, 570, 570, 570, 570, 570, 570, 570, 570, 570, 570, 570, 570, 570, 570, 570,570, 570, 570, 570, 570, 570, 570, 570, 570, 570, 570, 570, 570];
                    for (var i = 1; i < 84; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }
                    option = {
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView : {
                                    show : true,
                                    readOnly : true,
                                    optionToContent : function(opt) {
                                        //console.info(opt);
                                        var axisData = opt.xAxis[0].data;
                                        var series = opt.series;
                                        var tdHeaders = '<td>时间</td>'; //表头
                                        series.forEach(function(item) {
                                            tdHeaders += '<td>' + item.name + '</td>'; //组装表头
                                        });
                                        var table = '<div class="table-responsive"><table class="table table-bordered table-striped table-hover" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
                                        var tdBodys = ''; //数据
                                        for (let i = 0, l = axisData.length; i < l; i++) {
                                            for (let j = 0; j < series.length; j++) {
                                                tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
                                            }
                                            table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                            tdBodys = '';
                                        }

                                        table += '</tbody></table></div>';
                                        return table;
                                    }
                                },
                                restore:{},
                                saveAsImage: {}
                            }
                        },
                        title: {
                            text: '累计(确诊、治愈、死亡)',
                            top: '7%'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['累计确诊', '累计治愈', '累计死亡'],
                            top: '7%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '累计确诊',
                                type: 'line',
                                stack: '累计确诊',
                                data: date1
                            },
                            {
                                name: '累计治愈',
                                type: 'line',
                                stack: '累计治愈',
                                data: date3
                            },
                            {
                                name: '累计死亡',
                                type: 'line',
                                stack: '累计死亡',
                                data: date2
                            }

                        ]
                    };

                    myChart.setOption(option)
                </script>
                <div style="width: 1218px; height: 200px; padding: 0">
                    <table class="table table-hover table-bordered  table-sm" style="text-align:center; width:
                700px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                累计(确诊、治愈、死亡)分析
                            </th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>累计确诊</td>
                            <td>截至2/22呈上升趋势，而后平稳</td>
                        </tr>
                        <tr>
                            <td>累计治愈</td>
                            <td>截至3/13呈上升趋势，而后平稳</td>
                        </tr>
                        <tr>
                            <td>累计死亡</td>
                            <td>基本处于平稳趋势</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div style="width: 1218px; height: 600px">
                <div id="container" style="width: 1218px; height: 600px"></div>
                <script th:inline="javascript">
                    //将图标实例化和容器关联
                    var myChart = echarts.init(document.querySelector('#container'));
                    //http://baiduyun:8066/api/data
                    // fetch('http://127.0.0.1:8066/api/data')
                    var weburl = [[${webUrl}]]
                    fetch(weburl)
                        .then(res => res.json())
                        .then(res => {
                            // console.log(res); // 获取到的数据
                            var getAreaStat = res.getAreaStat;
                            // console.log(getAreaStat); // 获取到的数据

                            // 将接口返回的数据进行处理 转为echarts认可的数据
                            var filterData = [];
                            var cities = [];
                            var map = [];

                            getAreaStat.forEach(item => {
                                filterData.push({
                                    name: item.provinceShortName,
                                    value: item.confirmedCount,
                                    deadCount: item.deadCount,
                                    curedCount: item.curedCount,
                                    cites: item.cities
                                });
                            });

                            filterData.forEach(item => {
                                cities.push({
                                    city: item.cites
                                })
                            });
                            // [{name: '湖北', value: 5556,deadCount: 6, curedCount: 4}, ...]
                            // console.log(filterData)
                            // console.log(cities[0].city)
                            //配置图标数据信息)
                            cities[20].city.forEach(item => {
                                map.push({
                                    name: item.cityName,
                                    value: item.confirmedCount,
                                    deadCount: item.deadCount,
                                    curedCount: item.curedCount,
                                });
                            });
                            console.log(map)

                            myChart.setOption({
                                // 标题
                                title: {
                                    text: '重庆疫情分布图',
                                    left: 'center'
                                },
                                // 图标的背景
                                background: "#f7f7f7",

                                visualMap: [
                                    {
                                        type: 'piecewise', // continuous连续的 piecewise分段
                                        pieces: [
                                            {min: 10000}, // (10000, Infinity]
                                            {min: 1000, max: 9999}, // (1000, 9999]
                                            {min: 100, max: 999}, // (100, 999]
                                            {min: 10, max: 99}, // (10, 99]
                                            {gt: 0, lte: 9} // (0, 9]
                                        ],
                                        inRange: {
                                            color: ['#fdebcf', '#f59e83', '#e55a4e', '#cb2a2f', '#811c24']
                                        }
                                    }
                                ],

                                tooltip: {
                                    // triggerOn: 'click',
                                    formatter: function (params) {
                                        // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                                        console.log(params, 'formatter')
                                        return `地区：${params.name}<br/>确诊：${params.value || 0}人<br/>治愈：${(params.data &&
                                            params.data.curedCount) || 0}人<br/>死亡：${(params.data && params.data.deadCount) || 0}人<br/>`
                                    }
                                },

                                series: [
                                    {
                                        type: 'map', // 当前图标的类型
                                        map: 'chongqing', //当前地图为中国
                                        label: {
                                            // 覆盖物设置
                                            show: true
                                        },
                                        zoom: 1.2,
                                        data: map
                                    }
                                ]
                            })
                        })
                </script>
            </div>

            <a class="btn btn-sm btn-primary" th:href="@{/page1}" style="float: right">返回</a>

        </main>
    </div>
</div>
</body>
</html>